<template>
  <el-pagination
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    layout="->, total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from "vue";

const props = defineProps({
  total: {
    type: Number,
    required: true,
  }, //总条数
  pageSize: {
    type: Number,
    default: 10,
  }, //每页条目数
});

const currentPage = ref(1); //默认当前页
const pageSize = ref(props.pageSize); //每页条目数
const total = ref(props.total); //总条数

// 监听每页条目数据
watch(
  () => props.pageSize,
  (newPageSize) => {
    pageSize.value = newPageSize;
  }
);
// 监听总条数
watch(
  () => props.total,
  (newTatol) => {
    total.value = newTatol;
  }
);

const emits = defineEmits(["uadate:currentPage", "update:pageSize"]);

const handleSizeChange = async (newSize: number) => {
  pageSize.value = newSize;
  console.log(total);
  emits("update:pageSize", newSize);
};
const handleCurrentChange = async (newPage: number) => {
  currentPage.value = newPage;
  emits("uadate:currentPage", newPage);
};
</script>

<style scoped></style>
